<template>
  <div>
    <el-form :inline="true" :model="searchModel" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input
          v-model="searchModel.searchItem.user_name"
          placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户全名">
        <el-input
          v-model="searchModel.searchItem.user_full_name"
          placeholder="用户全名"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户状态">
        <el-select
          v-model="searchModel.searchItem.user_status"
          placeholder="全部"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="有效" value="1"></el-option>
          <el-option label="无效" value="2"></el-option>
        </el-select>
        <el-form-item label="创建时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="searchModel.searchItem.begin_creator_date"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="searchModel.searchItem.end_creator_date"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form-item>
      <el-button @click="searchAdminUser">搜索</el-button>
      <el-button @click="openAdminUserAdd">添加</el-button>
    </el-form>
    <el-table ref="filterTable" :data="pageModel.data" style="width: 100%">
      <el-table-column prop="user_name" label="用户名"> </el-table-column>
      <el-table-column prop="user_full_name" label="用户姓名">
      </el-table-column>

      <el-table-column prop="user_status" label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.user_status == 1 ? 'primary' : 'success'"
            disable-transitions
            >{{ scope.row.user_status == 1 ? "有效" : "无效" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="creator_date"
        label="创建日期"
        width="150"
        align="center"
        :formatter="this.$dateTools.dateFormat"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="openAdminUserUpdate(scope.row.user_name)"
            type="text"
            size="small"
            >编辑</el-button
          >

          <el-button
            @click="opUpdatePwd(scope.row.user_name, scope.row.user_full_name)"
            type="text"
            size="small"
            >修改用户密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="searchAdminUser"
      @current-change="searchAdminUser"
      :current-page.sync="searchModel.pageIndex"
      :page-sizes="[2, 4, 6, 8]"
      :page-size.sync="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageModel.total"
    >
    </el-pagination>
    <!--用户添加弹出层-->
    <!--:close-on-click-modal  设置弹出层其他区域点击 不关闭-->
    <el-dialog
      :title="editModel.editType == 1 ? '用户添加' : '用户修改'"
      :visible.sync="editModel.isShowEdit"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :model="editModel.userInfo"
        :rules="editModel.rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="用户名"
              :prop="editModel.editType == 1 ? 'user_name' : ''"
            >
              <el-input
                v-model="editModel.userInfo.user_name"
                :disabled="editModel.editType == 1 ? false : true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户姓名" prop="user_full_name">
              <el-input v-model="editModel.userInfo.user_full_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="editModel.editType == 1">
          <el-col :span="12">
            <el-form-item label="用户密码" prop="pass_word">
              <el-input
                type="password"
                v-model="editModel.userInfo.pass_word"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="check_pass_word">
              <el-input
                type="password"
                v-model="editModel.userInfo.check_pass_word"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="用户角色" prop="roleIds">
              <el-select
                v-model="editModel.userInfo.roleIds"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="请输入角色名称"
                :remote-method="searchRoles"
                :loading="editModel.loading"
              >
                <el-option
                  v-for="item in editModel.roles"
                  :key="item.role_id"
                  :label="item.role_name"
                  :value="item.role_id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户状态">
              <el-switch
                v-model="editModel.userInfo.user_status"
                active-text="有效"
                inactive-text="无效"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            @click="
              editModel.editType == 1 ? adminUserAdd() : adminUserUpdate()
            "
            >{{ editModel.editType == 1 ? "立即创建" : "修改保存" }}</el-button
          >
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      :visible.sync="updatePassWord.isShowUpdatePwd"
      :close-on-click-modal="false"
    >
      <el-form
        ref="updatePassWordForm"
        :model="updatePassWord"
        :rules="updatePassWord.rules"
        label-width="100px"
      >
        <el-form-item label="用户名">
          {{ updatePassWord.user_name }}
        </el-form-item>
        <el-form-item label="用户姓名">
          {{ updatePassWord.user_full_name }}
        </el-form-item>
        <el-form-item label="用户密码" prop="pwd">
          <el-input
            type="password"
            v-model="updatePassWord.pwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="vpwd">
          <el-input
            type="password"
            v-model="updatePassWord.vpwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatePwd()">修改保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  VAdminUserName,
  SearchPage,
   SearchPageRole,
  GetAdminUserViewByUserName,
  AdminUserUpdate,
  AdminUserAdd,
  AdminUserPwdUpdate
} from "./AdminUserManagerApi";
export default {
  data() {
    var that = this;
    //验证modelcode是否唯一
    var vAdminUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能是空的"));
      }
      // that.$myaxios
      //   .get("AdminUserManager/VAdminUserName", {
      //     params: { userName: that.editModel.userInfo.user_name },
      //   })
      VAdminUserName(that.editModel.userInfo.user_name)
        .then((r) => {
          if (r.data) {
            callback();
          } else {
            callback(new Error("用户名已经被使用,请从重新输入其他用户名"));
          }
        });
    };
    var validatePass = (rule, value, callback) => {
      console.log("a");
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== that.editModel.userInfo.pass_word) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateUpdatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== that.updatePassWord.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      pageModel: {},

      searchModel: {
        searchItem: {
          user_name: null,
          user_full_name: null,
          user_status: null,
          begin_creator_date: null,
          end_creator_date: null,
        },
        pageIndex: 1,
        pageSize: 6,
      },

      editModel: {
        //添加或者修改操作的model
        userInfo: {
          pass_word: "",
          check_pass_word: "",
          roleIds: [],
        },
        searchRoles: {
          pageIndex: 1,
          pageSize: 100,
          searchItem: {
            role_name: "",
          },
        },
        loading: false, //显示搜索角色的加载动画
        roles: [],
        isShowEdit: false, //是否显示弹出层
        editType: 1, //1 添加  2修改
        rules: {
          user_name: [
            { validator: vAdminUserName }, //验证用户名唯一
            { required: true, message: "请输入用户名" },
          ],
          user_full_name: [{ required: true, message: "请输入用户姓名" }],
          pass_word: [{ required: true, message: "请输入密码" }],
          check_pass_word: [
            { validator: validatePass }, //验证密码是否输入正确
          ],
          roleIds: [{ required: true, message: "请选择角色" }],
        },
      },
      updatePassWord: {
        isShowUpdatePwd: false,
        user_name: "",
        user_full_name: "",
        pwd: "",
        vpwd: "",
        rules: {
          pwd: [{ required: true, message: "请输入密码" }],
          vpwd: [
            { required: true, message: "请输入验证密码" },
            { validator: validateUpdatePass },
          ],
        },
      },
    };
  },
  created() {
    this.searchAdminUser();
  },

  methods: {
    searchAdminUser() {
      // this.$myaxios
      //   .post("AdminUserManager/SearchPage", this.searchModel)
      SearchPage(this.searchModel)
        .then((r) => {
          //  console.log(r.data.data);
          this.pageModel = r.data;
        });
    },
    searchRoles(sValue) {
      if (sValue) {
        this.editModel.loading = true;
        this.editModel.searchRoles.searchItem.role_name =
          sValue == " " ? "" : sValue;
        // this.$myaxios
        //   .post("RoleManager/SearchPage", this.editModel.searchRoles)
        SearchPageRole( this.editModel.searchRoles)
          .then((r) => {
            console.log(r.data.data);
            this.editModel.loading = false;
            this.editModel.roles = r.data.data;
          });
      }
    },
    openAdminUserAdd() {
      this.editModel.isShowEdit = true;
      this.editModel.editType = 1;
      this.editModel.userInfo = {
        roleIds: [],
      };
    },
    adminUserAdd() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // this.$myaxios
          //   .post("AdminUserManager/AdminUserAdd", this.editModel.userInfo)
          AdminUserAdd(this.editModel.userInfo)
            .then((r) => {
              if (r.code == 1) {
                this.$message("添加成功");
                this.editModel.isShowEdit = false;
                this.searchAdminUser();
              }
            });
        }
      });
    },
    openAdminUserUpdate(userName) {
      // this.$myaxios
      //   .get("AdminUserManager/GetAdminUserViewByUserName", {
      //     params: {
      //       userName: userName,
      //     },
      //   })
      GetAdminUserViewByUserName(userName)
        .then((r) => {
          this.editModel.userInfo = r.data;
          this.editModel.isShowEdit = true;
          this.editModel.roles = r.data.roles;
          this.editModel.editType = 2;
        });
    },
    adminUserUpdate() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // this.$myaxios
          //   .post("AdminUserManager/AdminUserUpdate", this.editModel.userInfo)
          AdminUserUpdate(this.editModel.userInfo)
            .then((r) => {
              if (r.code == 1) {
                this.$message("修改成功");
                this.editModel.isShowEdit = false;
                this.searchAdminUser();
              }
            });
        }
      });
    },
    opUpdatePwd(userName, user_full_name) {
      
      this.updatePassWord.isShowUpdatePwd = true;
      this.updatePassWord.user_full_name = user_full_name;
      this.updatePassWord.user_name = userName;
      this.pwd="";
      this.vpwd="";
    },
    updatePwd() {
      this.$refs["updatePassWordForm"].validate((valid) => {
        if (valid) {
          // this.$myaxios
          //   .get("AdminUserManager/AdminUserPwdUpdate", {
          //     params: {
          //       userName: this.updatePassWord.user_name,
          //       pwd: this.updatePassWord.pwd,
          //     },
          //   })
          AdminUserPwdUpdate(this.updatePassWord.user_name,this.updatePassWord.pwd)
            .then((r) => {
              if (r.code == 1 && r.data) {
                this.$message("修改成功");
                this.updatePassWord = {};
                this.updatePassWord.isShowUpdatePwd = false;
              }
            });
        }
      });
    },
  },
};
</script>
